<template>
    <div class="mr-root">
        <public-header>
            <i slot="icon" class="icon-chevron-left" @click="change"></i>         
        </public-header>
        <div class="mr-content">
            <div class="div1">
                <img src="../assets/image/user.png" alt="">
                <div class="img-right" @click="go">
                    <p class="username">{{loginname}}</p>
                    <p class="money">查看或编辑个人主页</p>
                </div>
                <div class="clear"></div>
            </div>
            <div class="div2">
                <div class="wrap">
                    <i class="icon-eye-open tubiao"></i>
                    <div class="wenzi">我的关注<span class="count">0</span></div>
                </div>
                <!--<div class="clear"></div>-->
                <div class="wrap">
                    <i class="icon-bookmark tubiao"></i>
                    <router-link to='/mycollection'>
                        <div class="wenzi">&nbsp;我的收藏<span class="count">{{collect.length}}</span></div>
                    </router-link>
                </div>
                <router-link to="/myshare">
                    <div class="wrap">
                        <i class="icon-edit-sign tubiao"></i>
                        <div class="wenzi"> 我的分享<span class="count">{{recentTopic.length}}</span></div>
                    </div>
                </router-link>
                
                <div class="wrap">
                    <i class="icon-file tubiao"></i>
                    <div class="wenzi">&nbsp;我的草稿<span class="count">0</span></div>
                </div>
                <router-link to="/mymessage">
                    <div class="wrap">
                        <i class="icon-envelope tubiao"></i>
                        <div class="wenzi">我的消息<span :class="[{classA:isActive},classB]" class="count">{{count}}</span></div>
                    </div>
                </router-link>
                <div class="clear"></div>
            </div>
            <div class="div3">
                <div class="wrap">
                    <i class="icon-cog tubiao"></i>
                    <div class="wenzi"> &nbsp;设置</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import PublicHeader from '../components/Header'
    export default{
        data(){
            return{
                loginname:localStorage.getItem('loginname'),
                collect:[],
                recentTopic:[],
                count:'0',
                isActive:false,
                classB:true
            }
        },
        components:{
            PublicHeader
        },
        methods:{
            change(){
                this.$router.push('/home')
            },
            go(){
                this.$router.push('/userhome')
            }
        },
        created(){
            //获取分享数，收藏数
            var loginname=localStorage.getItem('loginname')  
            this.axios.get('/vueapi/v1/user/'+loginname)
            .then(data=>{
                // console.log(data)
                var collect=this.collect=data.data.data.collect_topics
                // console.log(collect)
                var recentTopic=this.recentTopic=data.data.data.recent_topics
            })
            .catch(err=>{
                console.log(err)
            })
            //获取未读消息数
            var accesstoken=localStorage.getItem('accesstoken')
            this.axios.get('/vueapi/v1/message/count?accesstoken='+accesstoken)
            .then(data=>{
                //console.log(data.data.data)0
                this.count=data.data.data
                if(this.count!=0){
                    this.isActive=true
                }
            })
        }
    }
</script>

<style scoped>
    .mr-content{
        padding-top: 54px;
    }
    .icon-chevron-left{
        font-size: 18px;
        margin-left: 20px;
        color: #fff;
    }
    .div1{
        box-shadow: 0 1px 15px rgba(0,0,0,.2);
        padding: 10px;
    }
    img{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        float: left;
    }
    .img-right{
        float: left;
        color: #555;
        font-size: 14px;
        margin: 8px 0 0 20px;
    }
    .money{
        margin-top: 2px;
        font-size: 12px;
        color: #9a9a9a;
    }
    .div2,.div3{
        margin-top: 10px;
        box-shadow: 0 1px 15px rgba(0,0,0,.2);
        padding: 10px 0 20px 15px;
        color: #555;
        font-size: 14px;
    }
    .wrap{
        padding: 20px 0;
    }
    i.tubiao{
        float: left;
        margin-right: 20px;
        font-size: 18px;
        color: #555;
    }
    div.wenzi{
        color: #555;
        float: left;
    }
    .count{
        margin-left: 240px;
    }
    .classA{
        color: red;
    }
    .classB{
        color: #555;
    }
</style>